<template>
   <div class="mubu">
  <div id="main">
 
<!-- 欢迎 -->
<div class="first">
<img :src="gifurl" alt="" id="Gifurl">
<span>欢迎登录！{{ this.$store.state.user.username}}</span>


<!-- <img src="blob:http://localhost:8081/22f1da15-3aa9-4642-b84b-178b99f7e7ab" alt=""> -->
</div>


<!-- 轮播图 -->
<!-- <div class="card">
<el-carousel :interval="3000" type="card" style="margin: 15px auto" autoplay>
    <el-carousel-item v-for="item in imgData" :key="item.value" class="Caritem"> -->
   		<!--走马灯中也可以添加一些文字信息-->
        <!-- <p align="center" style="font-size: x-large;font-family: 华文新魏;color: #f56c6c">{{item.txt}}</p>-->
        <!-- <img ref="imgHeight" :src="item.url" width="100%" height="100%" object-fit="cover">
    </el-carousel-item>
</el-carousel>
</div> -->



    
    
<div class="container">
  <div class="picbox">
      <!-- 假如变量imgs为接口返回的图片数组，循环显示 -->
      
      <div v-for="(item, index) in imgs" :key="index">
        <!-- 服务端地址 + 数据库里的 icon字段 便可以显示一张图片 -->
        <img id="pic" :src="'http://localhost:8081/' + item.picURL" alt="" />
        
      </div>
    </div>

    <div class="upload">
      <input type="file" id="file" @change="add($event)" />
    </div>
</div>

    
  
    
    
    
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import navMenu from '../components/navMenu.vue';
export default {
name:'home',
components:{
  navMenu
},
data() {
  return {
    gifurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0103ad5c08bceea80121ab5d85cf7a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663984495&t=85c1bf3b0b4b3f80b51c4565d9041a9f',
    // imgData:[
    //             {url:require('../assets/1.png')},
    //             {url:require('../assets/2.png')},
    //             {url:require('../assets/3.png')},
    //             {url:require('../assets/4.png')},
    //         ],
            imgs: '',

  }
},
    directives: {
      trigger: {
            inserted(el, binging) {
                el.click()
                //$(el).trigger('click')
            }
        }
    },
   
methods:{
 

 //上传图片
 add(e) {
      //获取到第一个文件
      var file = e.target.files[0];
      const username = this.$store.state.user.username;
      //可打印看看
      // console.log(e.target.files);
      //新建一个 FormData 对象
      var param = new FormData();
      // 把文件添加到 FormData对象里
      param.append("icon", file);
      param.append("name", username);
      //可以打印看看
      // console.log(param.get("file"));

   

      //利用axios发送post请求
   
    
      axios
        .post("http://localhost:8081/addPic", param, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
         //调用查询方法
         console.log(res);
          this.qy();
        });
    },
 //查询
 qy() {
    const username = this.$store.state.user.username
    
      axios({
        url: "http://localhost:8081/showPic",
        params:{
          username
        },
        method: "get",
      }
      ).then((res) => {
        //把后端返回数据赋值给imgs
      
        this.imgs = res.data.data;
      

      });
    },
  
  

}, created() {
    this.qy();
  },

}
</script>

<style lang="less" scoped>
.mubu{
    width: 100%;
    height: 20px;
    background-color: #7bbfea;
  
  }
#main{
  display: flex;
  position: relative;
  
.first{
   width:300px;
   height:300px;
   #Gifurl{
    width: 60%;
    height: 60%;
  }
  span{
    display: block;
    margin: auto 20px;
  }

}
.container{
  position: absolute;
  top: 100px;
  right: 100px;
    width: 150px;
    height: 150px;
    border: 0;
    box-shadow:0 0 0;
    z-index: 9999;
    // background-color: red;
    .picbox{
   
    position: absolute;
    bottom: 50px;
    }
    .upload {
      position: absolute;
      top: 100px;
  margin: 20px auto;
  width: 60px;
  height: 20px;
  background-color: rgba(135, 206, 235, 0.2);
  border: 1px dashed black;
  border-radius: 5px;
    // background-color: red;
  position: relative;
}
.upload:hover {
  background-color: rgba(135, 206, 235, 1);
}
.upload::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "上传头像";
  font-size: 8px;
  text-align: center;
  font-family: "fangsong";
  line-height: 20px;
  user-select: none;
}
#file {
  width: 100%;
  height: 100%;
  opacity: 0;
}

#pic{

  width: 150px;
  height: 150px;
  border-radius: 50%;
}
  }
// .card{
//   width:800px;
//   height:270px;
//   margin:auto;
//   // border-left: 1px dashed grey;
//   // border-right: 1px dashed grey;
//   // background-color: blue;
//   .Caritem{
//       border: 1px dashed grey;

//   }
// }



}




</style>